<script setup lang="ts">
import { reactive, defineProps, defineEmits, ref, watch, toRaw } from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import {
  submitUpdateExamine,
  insertPlan,
  uploadAttachment,
} from '#/api/core/heatingSeason';
import { message } from 'ant-design-vue';

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: 'add',
  },
  data: {
    type: Object,
    default: {},
  },
});

const inputData = ref({
  id: '',
  villageId: '',
  villageName: '',
  villageType: '',
  year: '',
  rcvbFullHouses: '',
  rcvbFullArea: '',
  rcvbFullMoney: '',
  rcvbBaseHouses: '',
  rcvbBaseArea: '',
  rcvbBaseMoney: '',
  suggestionsOpinion: '',
});
watch(
  () => props.data,
  (newVal, oldVal) => {
    console.log('newVal', newVal.key);
    if (props.type == 'add') {
      inputData.value.villageId = newVal.key;
      inputData.value.villageName = newVal.title;
      (inputData.value.villageType = ''),
        (inputData.value.year = ''),
        (inputData.value.rcvbFullHouses = ''),
        (inputData.value.rcvbFullArea = ''),
        (inputData.value.rcvbFullMoney = ''),
        (inputData.value.rcvbBaseHouses = ''),
        (inputData.value.rcvbBaseArea = ''),
        (inputData.value.rcvbBaseMoney = ''),
        (inputData.value.suggestionsOpinion = '');
    } else {
      inputData.value = {
        id: newVal.id,
        villageId: newVal.villageId,
        villageName: newVal.villageName,
        villageType: newVal.villageType,
        year: newVal.year,
        rcvbFullHouses: newVal.rcvbFullHouses,
        rcvbFullArea: newVal.rcvbFullArea,
        rcvbFullMoney: newVal.rcvbFullMoney,
        rcvbBaseHouses: newVal.rcvbBaseHouses,
        rcvbBaseArea: newVal.rcvbBaseArea,
        rcvbBaseMoney: newVal.rcvbBaseMoney,
        suggestionsOpinion: newVal.suggestionsOpinion,
      };
    }
  },
  { immediate: true, deep: true },
);
const labelCol = { style: { width: '130px' } };
const emit = defineEmits(['close']);
const onClose = () => {
  emit('close');
};
const onSave = async () => {
  console.log('inputData', inputData.value);
  if (props.type === 'add') {
    let res = await insertPlan(inputData.value);
    if (res.data.code === 200) {
      message.success(res.data.msg);
      onClose();
    } else {
      message.error(res.data.msg);
    }
  } else {
    let res = await submitUpdateExamine(inputData.value);
    if (res.data.code === 200) {
      message.success(res.data.msg);
      onClose();
    } else {
      message.error(res.data.msg);
    }
  }
};
// 上传
const fileList = ref([]);
const handleUpload = async (fileObj: any) => {
  try {
    const formData = new FormData();
    formData.append('file', fileObj.file);

    const res = await uploadAttachment(formData);
    if (res.data.code === 200) {
      fileObj.onSuccess(res.data); // 使用官方推荐的成功回调
      console.log('上传成功', res);
      message.success('上传成功');
    } else {
      fileObj.onError(new Error(res.data.msg || '上传失败'));
      message.error(res.data.msg || '上传失败');
    }
  } catch (err) {
    fileObj.onError(err);
    message.error('上传失败');
  }
};
</script>

<template>
  <div>
    <a-drawer
      v-model:open="props.open"
      :title="props.type == 'add' ? '新增采暖季应收计划' : '采暖季应收计划修改'"
      placement="right"
      @close="onClose"
      width="450px"
    >
      <a-form :label-col="labelCol">
        <a-form-item label="小区名称">
          <a-input
            disabled
            placeholder="小区名称"
            v-model:value="inputData.villageName"
          />
        </a-form-item>
        <a-form-item label="小区类型">
          <a-input
            placeholder="小区类型"
            v-model:value="inputData.villageType"
          />
        </a-form-item>
        <a-form-item label="收费期">
          <a-date-picker
            picker="year"
            value-format="YYYY"
            allowClear
            v-model:value="inputData.year"
            placeholder="收费期"
          />
        </a-form-item>
        <a-divider orientation="left">计划应收全费</a-divider>
        <a-form-item label="计划户数">
          <a-input
            placeholder="计划户数"
            v-model:value="inputData.rcvbFullHouses"
          />
        </a-form-item>
        <a-form-item label="计划面积(m²)">
          <a-input
            placeholder="计划面积(m²)"
            v-model:value="inputData.rcvbFullArea"
          />
        </a-form-item>
        <a-form-item label="计划金额(元)">
          <a-input
            placeholder="计划金额(元)"
            v-model:value="inputData.rcvbFullMoney"
          />
        </a-form-item>
        <a-divider orientation="left">计划应收基本费</a-divider>
        <a-form-item label="计划户数">
          <a-input
            placeholder="计划户数"
            v-model:value="inputData.rcvbBaseHouses"
          />
        </a-form-item>
        <a-form-item label="计划面积(m²)">
          <a-input
            placeholder="计划面积(m²)"
            v-model:value="inputData.rcvbBaseArea"
          />
        </a-form-item>
        <a-form-item label="计划金额(元)">
          <a-input
            placeholder="计划金额(元)"
            v-model:value="inputData.rcvbBaseMoney"
          />
        </a-form-item>
        <a-form-item label="修改意见" v-if="props.type === 'edit'">
          <a-textarea
            v-model:value="inputData.suggestionsOpinion"
            placeholder="修改意见"
            :rows="2"
          />
        </a-form-item>
        <a-form-item label="附件" v-if="props.type === 'edit'">
          <a-upload
            v-model:file-list="fileList"
            :customRequest="handleUpload"
            list-type="picture"
            accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg"
          >
            <div>
              <a-button type="primary">
                <upload-outlined></upload-outlined>
                上传
              </a-button>
              <p style="color: darkgrey">
                仅支持pdf/doc/docx/xls/xlsx/png/jpg格式文件
              </p>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
      <template #footer>
        <div style="display: flex; justify-content: flex-end">
          <a-button type="primary" @click="onSave">保存</a-button>
          <a-button type="primary" @click="onClose">关闭</a-button>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

<style scoped></style>
